<template>
	<view class="bg-white h-100 p-20">
		<u-navbar title="修改昵称" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#1D1D20" class="navBarHeight" />
		<view class="w-100 p-20 border-box">
			<u-input class="font-28" v-model="content" maxlength="10" placeholder="请输入用户昵称" border="bottom" clearable></u-input>
		</view>
		<view class="u-margin-top-20 u-margin-left-32">
			<text class="font-28 m-l-10">10个字符之内，可由中英文、数字组成</text>
		</view>
		<view class="p-l-30 p-r-30">
			<button class="sub-btn m-t-20" @tap="$u.throttle(submit, 1000)">保存</button>
		</view>
	</view>
</template>

<script>
import { changeUserinfo } from '@/common/api/api.js';
import { mapState } from 'vuex';
import { customerInfo } from '@/common/api/customer.js'
import { Debounce } from "@/common/utils/tools.js";
export default {
	data() {
		return {
			content: '',
		}
	},
	computed: {
		...mapState('user', ['userInfo'])
	},
	onLoad() {
		this.content = this.userInfo.nickName
	},
	methods: {
		submit:Debounce(function (e) {
			let params = {
				nickname: this.content
			}
			changeUserinfo(params).then(res => {
				if (res.code == 200) {
					this.$msg('修改成功')
					setTimeout(()=> {
						customerInfo().then(res => {
							this.userInfo = res.data || {}
							this.$store.commit('user/setUserInfo', res.data || {})
						})
						uni.navigateBack()
					}, 1000)
				}
			})
		},500),
	}
}
</script>

<style lang="scss" scoped>
::v-deep .uni-input-placeholder {
	font-size: 26rpx !important;
}
page {
	padding: 0 20rpx;
}
/deep/.u-border-bottom {
	border-color: #dfe3e6 !important;
}
.h-100 {
	height: 100vh;
}
.sub-btn {
	height: 100rpx;
	line-height: 100rpx;
	color: #ffffff;
	font-size: 30rpx;
	font-weight: 500;
	letter-spacing: 2rpx;
	border-radius: 50rpx;
	margin-top: 200rpx;
	background-color: #ECA52B;
}
</style>
